<template>
  <a-layout :class="['layout', device]" style="position: relative">
    <!-- SideMenu -->
    <a-drawer
      v-if="isMobile()"
      placement="left"
      :wrapClassName="`drawer-sider ${navTheme}`"
      :closable="false"
      :visible="collapsed"
      @close="drawerClose"
    >
      <side-menu
        mode="inline"
        :menus="menus"
        :theme="navTheme"
        :collapsed="false"
        :collapsible="true"
        @menuSelect="menuSelect"
      ></side-menu>
    </a-drawer>
      <!-- 左侧菜单 -->
    <side-menu
      v-else-if="isSideMenu()&&$store.state.user.isForm"
      mode="inline"
      :menus="menus"
      :theme="navTheme"
      :collapsed="collapsed"
      :collapsible="true"
    ></side-menu>

    <a-layout
      :class="[layoutMode, `content-width-${contentWidth}`]"
      :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh', minWidth: '1100px', overflow: 'auto' }"
    >
      <!-- layout header -->
      <!-- 顶部头 -->
      <global-header
        :mode="layoutMode"
        :menus="menus"
        :theme="navTheme"
        :collapsed="collapsed"
        :device="device"
        @toggle="toggle"
        v-if="$store.state.user.isForm"
      />

      <!-- layout content -->
      <a-layout-content :style="{ height: '100%', margin: $store.state.user.isForm?'24px 24px 0':'0', paddingTop: fixedHeader ? '64px' : '0' }">
        <multi-tab v-if="multiTab"></multi-tab>
        <transition name="page-transition">
          <route-view />
        </transition>
      </a-layout-content>

      <!-- layout footer -->
      <a-layout-footer>
        <global-footer />
      </a-layout-footer>

      <!-- Setting Drawer (show in development mode) -->
      <setting-drawer v-if="!production"></setting-drawer>
    </a-layout>
    <div class="shuaka" @mouseenter="enter" @mouseleave="leave" v-if="value.quick">
      <div class="text-font" v-html="title"></div>
      <div class="blank-color">
        <div v-if="!cardInfo" class="cardInfo">
          <img src="~@/assets/img/qingshuka.png" style="width: 100px; height: 100px" v-if="showfont == '请刷卡'" />
          <img src="~@/assets/img/wuxiao.png" style="width: 100px; height: 100px" v-if="showfont == '无效卡'" />
          <img
            src="~@/assets/img/cantshuaka.png"
            style="width: 100px; height: 100px"
            v-if="showfont == '一分钟内不允许重复刷卡'"
          />
          <div>{{ showfont }}</div>
        </div>
        <div class="cardInfo" v-else>
          <img src="~@/assets/img/chenggong.png" style="width: 100px; height: 100px" />
          <div style="margin-top: 10px">{{ cardInfo.student.name }}</div>
          <div style="margin-top: 10px">{{ showfont }}</div>
        </div>
      </div>
      <input type="text" id="cardClockIn1" v-model="text1" ref="shuaka" autocomplete="off" />
    </div>
  </a-layout>
</template>

<script>
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin'
import config from '@/config/defaultSettings'

import RouteView from './RouteView'
import SideMenu from '@/components/Menu/SideMenu'
import GlobalHeader from '@/components/GlobalHeader'
import GlobalFooter from '@/components/GlobalFooter'
import SettingDrawer from '@/components/SettingDrawer'
import { convertRoutes } from '@/utils/routeConvert'
// import { asyncRouterMap } from '@/config/router.config.js'  //有权限后删除本句
import { payByCard, attendance } from '@/api/classconsumes'
import {_debounce}  from '@/utils/domUtil'
export default {
  name: 'BasicLayout',
  mixins: [mixin, mixinDevice],
  components: {
    RouteView,
    SideMenu,
    GlobalHeader,
    GlobalFooter,
    SettingDrawer,
  },
  data() {
    return {
      production: config.production,
      collapsed: false,
      menus: [],
      text1: '',
      flag: false,
      title: '鼠标移入<span style="margin:8px 0"></span>快速刷卡',
      value: {},
      showfont: '请刷卡',
      cardInfo: undefined,
      isForm:true
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: (state) => state.permission.addRouters,
    }),
    contentPaddingLeft() {
      if (!this.fixSidebar || this.isMobile()) {
        return '0'
      }
      if (this.sidebarOpened) {
        return '256px'
      }
      return '80px'
    },
  },
  watch: {
    sidebarOpened(val) {
      this.collapsed = !val
    },
    text1(newValue, oldValue) {
      document.querySelector('#cardClockIn1').focus()
      if (newValue!= '') {
        this.cardTj()
      }
    },
   
  },
  created() {
    const routes = convertRoutes(this.mainMenu.find((item) => item.path === '/'))
    this.menus = (routes && routes.children) || []
    this.collapsed = !this.sidebarOpened
    this.setAttendance()
  },
  //有权限后用上面
  //   created () {
  //   this.menus = asyncRouterMap.find((item) => item.path === '/').children
  //   // this.menus = this.mainMenu.find((item) => item.path === '/').children
  //   this.collapsed = !this.sidebarOpened
  // },
  mounted() {
    
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }
  },
  methods: {
    
    //节流
    cardTj:_debounce(function(){
      this.submit()
    },500),
    setAttendance() {
      attendance({ school_id: this.$store.state.user.school, key: 'attendance' })
        .then((res) => {
          this.value = res.value
        })
        .catch((err) => {
          this.$message.error(err.data.message || '配置获取失败!')
        })
    },
    submit() {
      if (this.flag == false) {
        this.flag = true
        payByCard({ school_id: this.$store.state.user.school, card_num: this.text1 })
          .then((res) => {
            this.$message.success('刷卡成功')
            this.text1 = ''
            if (!res.duration) {
              this.showfont = '签到成功'
            } else {
              this.showfont = '签退成功'
            }
            this.cardInfo = res
            this.flag = false
            setTimeout(() => {
              this.showfont = '请刷卡'
              this.cardInfo = undefined
            }, 2000)
          })
          .catch((err) => {
            this.$message.error(err.data.message || '操作失败，请刷新后重试')
            this.showfont = err.data.message
            setTimeout(() => {
              this.showfont = '请刷卡'
            }, 2000)
            this.text1 = ''
            this.flag = false
          })
      } else {
        this.$message.error('操作频繁')
        this.text1 = ''
      }
    },
    enter() {
      this.title = '鼠标移出<span style="margin:8px 0"></span>退出刷卡'
      this.$refs.shuaka.focus()
      this.text1 = ''
    },
    leave() {
      this.title = '鼠标移入<span style="margin:8px 0"></span>快速刷卡'
      this.$refs.shuaka.blur()
      this.text1 = ''
    },
    ...mapActions(['setSidebar']),
    toggle() {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    paddingCalc() {
      let left = ''
      if (this.sidebarOpened) {
        left = this.isDesktop() ? '256px' : '80px'
      } else {
        left = (this.isMobile() && '0') || (this.fixSidebar && '80px') || '0'
      }
      return left
    },
    menuSelect() {},
    drawerClose() {
      this.collapsed = false
    },
  },
}
</script>

<style lang="less" >
/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.shuaka {
  position: fixed;
  right: 0;
  top: 300px;
  display: flex;
  min-width: 30px;
  z-index: 999;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  .text-font {
    margin: 0 auto;
    font-size: 30px;
    line-height: 30px;
    color: #fff;
    background: #1890ff;
    text-align: center;
    font-size: 14px;
    width: 30px;
    height: 249px;
    writing-mode: tb-rl;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  .blank-color {
    display: none;
  }
  &:hover .blank-color {
    display: block;
    width: 200px;
    height: 249px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
#cardClockIn1 {
  position: absolute;
  left: -10000px;
}
.cardInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
